<template>
  <div class="edu-page-warp">
    <div class="edu-page-title">
      <span
        v-for="(item, index) in topNavItems"
        :class="{active: item.active}"
        :key="index"
        class="border-right"
        @click="clickItem(item)">{{ item.label }}</span>
    </div>
    <el-card shadow="never" body-style="padding: 24px;">
      <DetailInfo
        v-loading="loading"
        v-if="!activeName.typeList"
        :user-info="userInfo"
        :table-name="activeName.tableName"
        :student-id="studentId"/>
      <EduBackgroud v-if="activeName.typeList"/>
    </el-card>
  </div>
</template>
<script>
import {
  getStudentInfo
} from 'common/src/api/studentinfo'
import { DetailInfo, EduBackgroud } from 'common/src/views/tools/'

export default {
  name: 'StudentDetail',
  components: {
    DetailInfo,
    EduBackgroud
  },
  data() {
    return {
      isEdit: false,
      showBase: true,
      loading: false,
      activeName: '',
      studentId: '',
      topNavItems: [
        {
          label: '基础信息',
          active: true,
          tableName: 'student_basic_information_t',
          infos: '',
          typeList: false
        },
        {
          label: '学籍状态',
          active: false,
          tableName: 'student_status_information_t',
          infos: '',
          typeList: false
        },
        // {
        //   label: "入学信息",
        //   active: false,
        //   tableName: 'student_status_information_t',
        //   infos: '',
        //   typeList: false
        // },
        {
          label: '教育背景',
          active: false,
          tableName: 'student_educational_backgroud_t',
          infos: '',
          typeList: true
        },
        {
          label: '证件信息',
          active: false,
          tableName: 'student_passport_t',
          infos: '',
          typeList: false
        },
        {
          label: '联系人',
          active: false,
          tableName: 'student_contact_information_t',
          infos: '',
          typeList: false
        },
        {
          label: '宿舍',
          active: false,
          tableName: 'student_dormitory_t',
          infos: '',
          typeList: false
        },
        {
          label: '其他（国际学生）',
          active: false,
          tableName: 'student_other_infomation_t',
          infos: '',
          typeList: false
        }
      ],
      userInfo: '',
      saveInfo: {
        table: '',
        studentId: '',
        type: '1',
        columnValueList: []
      }
    }
  },
  created() {
    this.studentId = this.$route.query.studentId
    const query = {
      table: 'student_basic_information_t',
      studentId: this.studentId,
      type: 1
    }
    this.getStudentBaseInfo(query)
  },
  methods: {
    async clickItem(currentItem) {
      const query = {
        table: currentItem.tableName,
        studentId: this.studentId,
        type: 1
      }
      this.activeName = currentItem
      this.topNavItems.forEach(item => {
        if (currentItem.label === item.label) {
          item.active = true
        } else {
          item.active = false
        }
      })
      this.activeName = currentItem
      if (!currentItem.typeList) {
        this.getStudentBaseInfo(query)
      }
    },
    async getStudentBaseInfo(query) {
      this.loading = true
      const baseInfo = await getStudentInfo(query)
      console.log('baseInfo')
      console.log(baseInfo)
      this.loading = false
      if (baseInfo && baseInfo.data) {
        this.userInfo = baseInfo.data
      }
    },
    async getEidtColumn() {
      this.isEdit = true
    }
  }
}
</script>
<style lang="scss" scoped>
.edu-page-title {
  span {
    cursor: pointer;
    display: inline-block;
    padding-right: 10px;
  }
  span.active {
    color: #2876c2;
  }
}

.border-right {
  margin-right: 10px;
}

.item-group {
  width: 100%;
  height: 32px;
  float: left;
  font-size: 12px;
  label,
  span {
    display: inline-block;
    line-height: 32px;
  }
  label {
    /*width: 64px;*/
    text-align: right;
  }
}

.base-info-title {
  border-bottom: 1px solid #e5e5e5;
  height: 46px;
  overflow: hidden;
  img,
  span {
    display: inline-block;
    vertical-align: middle;
    /*margin-top: 12px;*/
  }
  img {
    width: 28px;
  }
  span {
    font-size: 16px;
    color: #262626;
  }
}
</style>
